<template>
  <div class="deatils">
    <!-- 头部介绍 -->
    <div class="top">
      <div>
        <img :src="playlist.coverImgUrl">
      </div>
      <div class="data">
        <p class="title">{{playlist.name}}</p>
        <div class="time">
          
           <span class="logo">网易云音乐</span>
           <span>{{playlist.createTime | datetime}}创建</span>
        </div>
        <div>
          标签:&nbsp;&nbsp;&nbsp;<span v-for="(item,index) in tags" :key="index">{{item}}·</span>
        </div>
        <div>
          简介: &nbsp;&nbsp;&nbsp;{{signature}}
        </div>
      </div>
    </div>
    <!-- tabs -->
    <el-tabs v-model="activeName">
    <el-tab-pane label="歌曲列表" name="first">
      <el-table
      :data="tracksinfo"
      style="width: 100%">
      <el-table-column type='index' label='#'></el-table-column>
      <el-table-column class="imgAll">
      <template slot-scope="scope">
        <img class="img" :src="scope.row.al.picUrl" @click="player(scope.row.id)">
      </template>
      </el-table-column>
       <el-table-column  label='音乐标题'>
         <template slot-scope="scope">
           <span>{{scope.row.name}}</span>
           <i class="iconfont icon-shipin"></i>
         </template>
       </el-table-column>
       <el-table-column  label='歌手' prop='name'>
         <template slot-scope="scope">
            <span v-for='item in scope.row.ar' :key="item.id">
              {{item.name }}
            </span>
         </template>
       </el-table-column>
       <el-table-column  label='专辑' prop='name'></el-table-column>
       <el-table-column  label='时长' prop='name'>
         <template slot-scope="scope">
          {{scope.row.m.size | second}} 
         </template>
       </el-table-column>
       
    </el-table>
    </el-tab-pane>
    <el-tab-pane :label='"评论("+total+")"' name="second">
      <p>热门评伦(20)</p>
      <div v-for="(item) in hotcomment" :key='item.id' class="hotcomment">
        <div>
          <img :src='item.user.avatarUrl'>
        </div>
        <div class="content">
          <span class="titlename">{{item.user.nickname}}:</span>
          <span class="commentdata">{{item.content}}</span>
          <p class="time">{{item.time |  detailstime}}</p>
        </div>
      </div>
      <p>最新评论</p>
      <div v-for="(item) in newcomment" :key='item.id' class="newscomment"> 
        <div>
          <img :src='item.user.avatarUrl'>
        </div>
          <div class="cominfo">
            <span class="titlename">{{item.user.nickname}}:</span>
            <span class="commentdata">{{item.content}}</span>
            <p class="time">{{item.time |  detailstime}}</p>
          </div>
        </div>
        <!-- 分页 -->
      <el-pagination
      @current-change="handleCurrentChange"
      background
      :page-size="5"
      layout="prev, pager, next"
      :total='1000'>
    </el-pagination>
    </el-tab-pane>
    </el-tabs>
 
  </div>
</template>

<script>
  export default {
    name:'detailsinfo',
    data () {
      return {
        id:'',
        deatildata:[],
        playlist:{} ,
        tags:[] ,
        signature:'',
        activeName: 'first',
        tracksinfo:[],
        total:0,
        hotcomment:[],
        offset:5,
        hotcomment:[],
        newcomment:[]
       }
    },
    filters: {
      datetime(time){
        const date =new Date(time)
       const y = date.getFullYear()
       const m = (date.getMonth() + 1 + '').padStart(2,'0')
       const d = (date.getDay() + '').padStart(2,'0')

       return  `${y}-${m}-${d}`
      },
      second(time){
        const date =new Date(time)
        const mm = (date.getMinutes() + '').padStart(2,'0')
        const ss = (date.getSeconds() + '').padStart(2,'0')      
        return `${mm}:${ss}`
      },
      detailstime(time){
       const date =new Date(time)
       const y = date.getFullYear()
       const m = (date.getMonth() + 1 + '').padStart(2,'0')
       const d = (date.getDay() + '').padStart(2,'0')
       const hh =(date.getHours()+'').padStart(2,'0')
       const mm = (date.getMinutes() + '').padStart(2,'0')
       const ss = (date.getSeconds() + '').padStart(2,'0')     
       return  `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    },
    created () {
      this.id = this.$route.query.id
      this.getdatailsinfo()
      this.commentinfo()
      this.newscomment()
    },
    methods: {
      async getdatailsinfo(){
        let res =await this.$http.get('playlist/detail',{params:{id:this.id}})
        // console.log(res)
        this.deatildata =res.data.privileges
        this.playlist =res.data.playlist
        this.tags= res.data.playlist.tags
        this.signature= res.data.playlist.creator.signature
        this.tracksinfo =res.data.playlist.tracks
       
      },
      async commentinfo(){
        const  res =await this.$http.get('comment/hot',{params:{
          type:2,
          id:this.id,
        }})
        this.total = res.data.total
        this.hotcomment = res.data.hotComments
      },
      //最新评论
      async newscomment(){
        const res = await this.$http.get('comment/playlist',{params:{
          id:this.id,
          limit:5,
          offset:this.offset
        }})
        console.log(res)
        this.newcomment = res.data.comments
      },
     async player(id){
        let res =await this.$http.get('song/url',{params:{id}})
        this.$parent.player = res.data.data[0].url
      },
      handleCurrentChange(val){
        this.offset +=5
        this.newscomment()
      }
    }
  }
</script>

<style lang="less" scoped>
.deatils{
  margin: 100px 10px 0 230px;
 .top{
    display: flex;
  img{
    width: 230px;
    height: 230px;
  }
  .data{
    line-height: 38px;
    margin-left: 20px;
    .logo::before{
     position: relative;
     top: 10px;
     content: '';
     display: inline-block;
     width: 38px;
     height: 38px;
     background: url('~assets/img/logomusic.png') no-repeat;
    }
    .logo{
      margin-right: 15px;
      font-size: 19px;
      color: black;
    }
  .title{
    font-size: 20px;
    font-weight: 400px;
  }
  }
 }
 .hotcomment{
   display: flex;
   margin: 15px 0 5px 10px;
   img{
     width: 50px;
     height: 50px;
     border-radius: 50px;
   }
  .content{
    line-height: 25px;
    margin-left: 15px;
    .titlename{
      color: blue;
    }
    .commentdata{
      font-size: 15px;
    }
   
  }
   .time{
      font-size: 15px;
      color: #ccc;
    }
 }
  .newscomment{
    display: flex;
    margin: 15px 0 5px 10px;
    img{
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
    .cominfo{
       line-height: 25px;
       margin-left: 15px;
      .titlename{
         color: blue;
      }
      .commentdata{
         font-size: 15px;
      }
    }
  }
  .time{
      font-size: 15px;
      color: #ccc;
    }
  .el-pagination{
    margin: 30px 0 100px 300px;
  }
}
 
  .img{
     width: 80px;
     height: 80px;
  }
  .iconfont{
    margin-left: 5px;
  }
  .el-table{
    margin-bottom: 100px;
  }
</style>